<style>
  .box {
    /* 父相 */
    position: relative;
    width: 500px;
    height: 500px;
    margin: 100px auto;
    background-color: gray;
  }
  /* 权重：10+1+10 */
  .box div[class^="test"] {
    /* 子绝 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 50px;
    height: 50px;

    box-shadow: 0 0 20px red;
    border-radius: 50%;

    /* 调用动画 */
    /* 匀速、不限次数 */
    /* animation: myBG 3s linear infinite; */
  }

  /* 权重：10+1+10，权重一致时，层叠性：后来居上 */
  .box div.test2 {
    width: 130px;
    height: 130px;
  }
  .box div.test3 {
    width: 180px;
    height: 180px;
  }
  .box div.test4 {
    width: 240px;
    height: 240px;
    box-shadow: 0 0 20px blue;
  }

  /* 动画延时：好看的波纹 */
  /* .box div.test2 {
    animation-delay: 1s;
  }
  .box div.test3 {
    animation-delay: 2s;
  }
  .box div.test4 {
    animation-delay: 3s;
  } */

  /* 定义动画 */
  /* 宽高从原始的50px自动变化到240px，可以加颜色、透明度等属性 */
  /* 起始状态0%那里可以不写，因为它们都是调用元素的默认值 */
  /* @keyframes myBG {
    0% {
      width: 50px;
      height: 50px;
      box-shadow: 0 0 20px red;
      opacity: 1;
    }
    100% {
      width: 240px;
      height: 240px;
      box-shadow: 0 0 20px blue;
      opacity: 0;
    }
  } */
</style>

<div class="box">
  <div class="test1"></div>
  <div class="test2"></div>
  <div class="test3"></div>
  <div class="test4"></div>
</div>
